<template>
  <div class="root">
    <NavigationVue :list="navibox"></NavigationVue>
    <div class="courseinfo">
      <div class="info-left">
        <van-icon @click="$router.back(-1)" name="revoke" />
        <div>{{cou_name }}</div>
      </div>

      <div class="info-right">
        <div>{{tch_name }}</div>
        <div>{{ cou_year }}第{{cou_term }}学期</div>
      </div>
    </div>
    <div class="pl-10 pr-10">
      <!-- <van-tabs
        v-model:active="active"
        color="#5793f1"
        title-active-color="#6d9eeb"
        duration="0.1"
      > -->
        <!-- <van-tab title="课件">
          <div
            class="courseware"
            v-for="(item, index) in coursewarelist"
            :key="index"
          >
            <van-icon name="link-o" />
            <div class="coursewarename">{{ item.name }}</div>
            <van-icon class="icon2" name="down" />
          </div>
        </van-tab> -->
        
        <!-- <van-tab title="作业"> -->
          <div class="table-box">
            <div class="table-declaration">
              <van-row>
                <van-col span="14" class="col1">作业名称</van-col>
                <van-col span="5" class="col2">状态</van-col>
                <van-col span="5" class="col2">成绩</van-col>
              </van-row>
            </div>
            <div
              class="assignment"
              @click="submit(index)"
              v-for="(item, index) in assignmentList"
              :key="index"
            >
              <van-row>
                <van-col span="14" class="col1">
                  <div>{{ item.work_title }}</div>
                  <div>截止时间：{{ item.work_endtime }}</div>
                </van-col>
                <van-col span="5" class="col2">{{
                  item.sub_creatime == null ? "未提交" : "已提交"
                }}</van-col>
                <van-col span="5" class="col2">{{
                  item.sub_score ? item.sub_score : "未评分"
                }}</van-col>
              </van-row>
            </div>
          </div>
        <!-- </van-tab> -->
      <!-- </van-tabs> -->
    </div>
  </div>
</template>

<script>
import NavigationVue from "@/components/Navigation.vue";
import request from "@/utils/request";
import { Toast } from "vant";
export default {
  data() {
    return {
      cou_id: "",
      stu_id: "",

      cou_name: "高一数学",
      cou_year: "20-21年",
      cou_Term: "1",
      tch_name: "11111111",
      assignmentList: [
        {
          cou_id: "1",
          sub_id: "1",
          work_id: "1",
          sub_creatime: "11",
          sub_score: "22",
          work_endtime: "11",
          work_title: "11",
          work_startime: "11",
        },
      ],
      coursewarelist: [
        {
          name: "单元一题目精讲",
        },
        {
          name: "单元二题目精讲",
        },
        {
          name: "单元三题目精讲",
        },
        {
          name: "单元四题目精讲",
        },
        {
          name: "单元五题目精讲",
        },
        {
          name: "单元六题目精讲",
        },
        {
          name: "单元七题目精讲",
        },
      ],
    };
  },

  created() {
    this.load();
    this.cou_name=localStorage.getItem("zyh_cou_name");
    this.cou_year=localStorage.getItem("zyh_cou_year");
    this.cou_Term=localStorage.getItem("zyh_cou_Term");
    this.tch_name=localStorage.getItem("zyh_tch_name");
    console.log(this.tch_name);
  },
  components: {
    NavigationVue,
    Toast,
  },
  methods: {
    load() {
      request
        .get("assignList.php", {
          params: {
            stu_id: localStorage.getItem("zyh_stu_id"),
            cou_id: this.$route.query.cou_id,
          },
        })
        .then((res) => {
          if (res.code == "-1") {
            this.$router.push("/login");
          } else {
            console.log(this.assignmentList.sub_creatime);
            this.assignmentList = res.data.workTable;

            // this.tableData = res.data.table;
            // this.total = parseInt(res.data.total);
          }
        });
    },

    submit(i) {
      if (!this.assignmentList[i].sub_creatime) {
        this.$router.push({
          path: "/submit",
          query: {
            work_id: this.assignmentList[i].work_id,
          },
        });
      } else {
        Toast("本次作业你已经提交过了哦~");
      }
    },
  },
};

//课件内容响应

// const age =ref<string>("vue")
// const obj = reactive({
// name:'112',
// title:'111'
// })
// let{name}= toRefs(obj)
// let nameIsOk=computed(()=>{
// if(obj.name==='112'){
//     return 'ok'
// }else{
//     return 'no'
// }
// })
// watch(()=>obj.name,(n,o)=>{
// console.log(n,o)
// },{
// immediate: true,
// deep: true
// })
// // let{name}= toRefs(obj) 既解构也响应
// const setName = ()=>{
// obj.name='22'
// }

// const active = ref(0);
</script>
<style >
/* 导航条加课程信息 */
.courseinfo {
  margin-top: 5px;
  padding: 2px;
  height: 30px;
  display: flex;
  border-bottom: 1px solid rgb(198, 195, 195);
  /* background-color: rgb(224, 191, 191); */
}
.info-left {
  display: flex;
  font-size: 15px;
  padding-top: 3px;
}
.info-left div {
  padding-left: 5px;
  color: rgb(163, 75, 40);
}
.info-right {
  position: absolute;
  right: 15px;
  font-size: 12px;
  width: 110px;
  text-align: right;
}
/* 课件 */
.courseware {
  padding-top: 9px;
  height: 36px;
  line-height: 18px;
  font-size: 18px;
  display: flex;
  margin-top: 8px;
  border: 1px dotted gray;
}
.icon2 {
  position: absolute;
  right: 8px;
}

/* 作业 */

.table-box {
  margin-top: 8px;
  margin: 3px;
  padding: 6px;
  border: 1px solid gray;
}

.table-declaration .van-row {
  line-height: 28px;
  height: 28px;
}
.assignment .van-row {
  border-top: 1px solid rgb(199, 195, 195);
  line-height: 42px;
  font-size: 12px;
  height: 42px;
}
.col1 div {
  padding-left: 3px;
  line-height: 21px;
}
.col2 {
  text-align: center;
  border-left: 1px solid rgb(199, 195, 195);
}
</style>